<template>
  <div>
    <!-- Carousel Section -->
    <div style="height: 530px;">
      <el-carousel indicator-position="outside" :interval="3000" style="height: 100%;">
        <!-- Carousel Items -->
        <el-carousel-item>
          <img src="../assets/1.jpg" alt="Image 1" style="width: 100%; height: 100%;">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/2.jpg" alt="Image 2" style="width: 100%; height: 100%;">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/3.jpg" alt="Image 3" style="width: 100%; height: 100%;">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/4.jpg" alt="Image 3" style="width: 100%; height: 100%;">
        </el-carousel-item>
        <!-- Add more carousel items as needed -->
      </el-carousel>
    </div>

    <!-- Hospital Information Section -->
    <div>
      <el-card>
        <el-descriptions title="个人信息">
          <el-descriptions-item label="姓名">{{ user.name }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ user.address }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ user.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">12525563@qq.com</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <!-- Three Cards Section -->
    <div class="card-container">
      <!-- Card 1: 挂号预约 -->
      <router-link to="/useradmin/registration" exact class="card-link">
        <el-card class="registration-card" header="挂号预约">
          <!-- Add content for 挂号预约 card -->
        </el-card>
      </router-link>

      <!-- Card 2: 医生查询 -->
      <router-link to="/useradmin/userpay" exact class="card-link">
        <el-card class="doctor-search-card" header="缴费窗口">
          <!-- Add content for 医生查询 card -->
        </el-card>
      </router-link>

      <!-- Card 3: 取消预约 -->

      <el-card class="cancel-appointment-card" header="正在排队">
       <div v-for="(item,index) in addressres" :key="index">{{ `您的就诊医生为${item.doctor},您的就诊序号为${item.id}` }}</div>
      </el-card>

    </div>
  </div>
</template>
  
<script>
import axios from 'axios';
export default {
  data() {
    return {
      addressres:[],
      users: [],
      hospitalInfo: {
        name: '重庆医科大学附属大学城医院',
        address: '重庆市沙坪坝区',
        phone: '010-12345678',
        email: 'info@hospital.com'
      }
    };
  },
  mounted() {
    this.getlist()
    this.getAddreser()
  },
  updated() {
    this.getlist()
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  methods: {
    getlist() {
      axios.get(`http://127.0.0.1:3000/api/addreser/name/${this.user.name}`)
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('Error fetching users:', error);
          this.$message.error('获取用户列表时发生错误');
        });
    },

    getAddreser() {
      // 发起GET请求
      axios.get('http://127.0.0.1:3000/api/addreser')
        .then(response => {
          // 处理成功的响应数据
          const addreserData = response.data;
          const filteredAddreserData = addreserData.filter(item => item.name === this.user.name);
          this.addressres= filteredAddreserData.filter(item => item.state !== '0');
          console.log(this.addressres);
         
       
        
        })
        .catch(error => {
          // 处理错误
          console.error('获取 addreser 数据时发生错误：', error);
          // 在这里可以进行错误处理，比如显示错误信息给用户
        });
    },
    sendRequest(name) {
  // 发起GET请求
  axios.get(`http://127.0.0.1:3000/api/addreser/name/${name}`)
    .then(response => {
      // 处理成功的响应数据
      const addreserData = response.data;
      console.log(addreserData);
      // 在这里可以对获取到的数据进行其他处理
    })
    .catch(error => {
      // 处理错误
      console.error('获取 addreser 数据时发生错误：', error);
      // 在这里可以进行错误处理，比如显示错误信息给用户
    });
}

  }
};
</script>
  
<style scoped>
::v-deep .el-carousel__container {
  height: 500px !important;
}

.card-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.card-link {
  text-decoration: none !important;
  /* Remove underline from router-link */
}

.registration-card,
.doctor-search-card,
.cancel-appointment-card {
  width: 500px;
  /* Calculate 1/3 width with spacing */
  border-radius: 10px;
  /* Add rounded corners */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 5px;
  height: 160px;
}

.registration-card {
  background-color: #66c0f4;
  /* Light Blue */
  text-align: center;
}

.doctor-search-card {
  background-color: #91c33b;
  /* Green */
  text-align: center;
}

.cancel-appointment-card {
  background-color: #f56c6c;
  /* Red */
  text-align: center;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  color: #fff;
  /* White text color */
}

/* Add your styles if needed */</style>
  